<template>
<!-- tab切换 -->
<van-tabs 
	v-model:active="active" animated
	color="#f6cc4a"
	title-inactive-color="#848688"
	title-active-color="#242629"
	class="co-tab-view nav-position"
	@click-tab="onClickTab"
	>
	<van-tab title-class="co-title-tab"
	v-for="(item,index) in tabNav" :title="item.name" :key="index"
	>
	</van-tab>
</van-tabs>
<div class="top-height"></div>
<!-- 发布者 -->
<van-list
	  v-model:loading="loading"
	  :finished="finished"
	  finished-text="没有更多了"
	  :immediate-check="false"
	  offset="100"
	  @load="onLoad">
<div class="companion-view" v-for="(item,index) in activityData" :key="index" @click="juMp(item._id)">
	<div class="companion-name global-display global-a-items">
		<img :src="item.author_data[0].avatarUrl" alt="">
		<div>
			<p>{{item.author_data[0].nickname}}</p>
			<p>{{item.timestamp}}</p>
		</div>
	</div>
	<div class="companion-title text-show">{{item.description}}</div>
	<div class="companion-time global-display global-a-items">
		<img src="@/icon/concern/time.png" alt="">
		<p>时间：&nbsp;{{item.companion_time}}</p>
	</div>
	<div class="companion-time global-display global-a-items">
		<img src="@/icon/concern/address.png" alt="">
		<p>地点：&nbsp;{{item.city}} {{item.full_address}}</p>
	</div>
	<div class="companion-image" v-for="(item_a,index_a) in item.image" :key="index_a">
		<img :src="item_a" @click.stop="showImage(item.image,index_a)" class="fadeIn">
	</div>
	<div class="companion-people">{{item.count}}人已报名</div>
</div>
<!-- 如果没有数据 -->
<van-empty
	v-if="exist"
	image="https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/icon/kong-zhuang-tai.png"
	image-size="80"
	description="你还没有任何相关的活动"
/>
</van-list>
<div style="height: 200px;"></div>
<div class="sign-up other-up" @click="initPartner">发布活动</div>
</template>

<script setup>
	import {ref,onMounted} from 'vue'
	import request from '@/api/request.js'
	// 图片预览
	import { showImagePreview } from 'vant';
	import { useRouter } from 'vue-router'
	const $router = useRouter()  // 这是路由跳转的
	import emitter from '@/api/event.js'
	// 标签切换索引值
	const active = ref(0);
	const tabNav = ref([
		{
			api:'/par_in_activities',
			name:'我参与的'
		},
		{
			api:'/my_in_activities',
			name:'我发起的'
		},
	])
	// 存储请求的数据
	const activityData = ref([])
	// 是否有数据
	const exist = ref(false)
	// 获取数据
	onMounted(async()=>{
		await requestApi(tabNav.value[0].api)
	})
	async function requestApi(api){
		page.value = 1//再次查询时要把页数置为1
		finished.value = false
		const res = await request.get(api,{page:1})
		console.log(res);
		activityData.value = res.data
		exist.value = res.data.length > 0 ? false : true
	}
	// 预览图片
	function showImage(image,index_a){
		showImagePreview({
		  images: image,
		  startPosition: index_a,
		});
	}
	// 跳转详情
	function juMp(_id){
		$router.push({path: '/partner-details', query: {_id}})
	};
	// 点击我参与的或者我发起的
	const tabIndex = ref(0)
	async function onClickTab(event){
		tabIndex.value = event.name
		await requestApi(tabNav.value[event.name].api)
	}
	// 上啦加载
	const loading = ref(false);
	const finished = ref(false);
	const page = ref(1)
	async function onLoad(){
		page.value++
		try{
			const companionRes = await request.get(tabNav.value[tabIndex.value].api,{page:page.value})
			activityData.value = [...activityData.value,...res.data]
			loading.value = false
			if(res.data.length === 0){
				finished.value = true
			}
		}catch(e){
			page.value = 1
			loading.value = false
			finished.value = true
		}
	}
	// 登陆成功被触发
	emitter.on('login-success', async() => {
		await requestApi(tabNav.value[tabIndex.value].api)
	})
	// 跳转发布活动
	function initPartner(){
		$router.push({path: '/Init-partner'})
	}
</script>

<style>
@import url('@/style/index.css');
.co-title-tab{
	font-weight: bold;
	font-size: 16px;
}
.co-tab-view .van-tabs__line{
	width: 30px; height: 5px;
}
.top-height{
	height: 44px;
}
</style>